<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div class="gallery">
            <img src="https://picsum.photos/id/1040/300/300" alt="a house on a mountain" />
            <img src="https://picsum.photos/id/106/300/300" alt="sime pink flowers" />
            <img src="https://picsum.photos/id/136/300/300" alt="big rocks with some trees" />
            <img
                src="https://picsum.photos/id/1039/300/300"
                alt="a waterfall, a lot of tree and a great view from the sky"
            />
            <img src="https://picsum.photos/id/110/300/300" alt="a cool landscape" />
            <img
                src="https://picsum.photos/id/1047/300/300"
                alt="inside a town between two big buildings"
            />
            <img
                src="https://picsum.photos/id/1057/300/300"
                alt="a great view of the sea above the mountain"
            />
        </div>
        <style>
            .gallery {
                --s: 150px; /* control the size */
                --g: 10px; /* control the gap */
                display: grid;
                margin: calc(var(--s) + var(--g));
            }

            .gallery > img {
                grid-area: 1/1;
                width: var(--s);
                aspect-ratio: 1.15;
                object-fit: cover;
                clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);
                transform: translate(var(--_x, 0), var(--_y, 0)) scale(var(--_t, 1));
                cursor: pointer;
                filter: grayscale(80%);
                transition: 0.2s linear;
            }
            .gallery > img:hover {
                filter: grayscale(0);
                z-index: 1;
                --_t: 1.2;
            }

            .gallery > img:nth-child(1) {
                --_y: calc(-100% - var(--g));
            }
            .gallery > img:nth-child(7) {
                --_y: calc(100% + var(--g));
            }
            .gallery > img:nth-child(3),
            .gallery > img:nth-child(5) {
                --_x: calc(-75% - 0.87 * var(--g));
            }
            .gallery > img:nth-child(4),
            .gallery > img:nth-child(6) {
                --_x: calc(75% + 0.87 * var(--g));
            }
            .gallery > img:nth-child(3),
            .gallery > img:nth-child(4) {
                --_y: calc(-50% - 0.5 * var(--g));
            }
            .gallery > img:nth-child(5),
            .gallery > img:nth-child(6) {
                --_y: calc(50% + 0.5 * var(--g));
            }

            body {
                margin: 0;
                min-height: 100vh;
                display: grid;
                place-content: center;
                background: #aabbfb;
            }
        </style>
    </body>
</html>
